<template>
  <div
    style="font-family: apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
background: #FFFFFF;height: 150px;">
    <div style="position: relative;top: 35px;padding-left: 150px;">
      <el-image
        class="head-img-style"
        :src="com_data.student_imagepath"
        fit="fill"></el-image>
      <i class="el-icon-edit" @click="handleinfo"></i>
      <p v-if="!name_edit" style="margin: 0;position:relative;padding-left: 180px;height: 50px;
  top: 50px;font-weight: bolder;font-size: 35px;">{{ com_data.enterprise_name }}
        <i @click="name_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 30px;color: #a8a8a8;"></i></p>
      <el-form :rules="rules" style="z-index: 1;margin: 0;position:relative;padding-left: 180px;
  top: 50px;height: 50px;" v-if="name_edit" ref="com_edit_data" :model="com_edit_data" label-width="80px">
        <el-form-item class="edit-item-style" label="公司名称" prop="enterprise_name">
          <el-input v-model="com_edit_data.enterprise_name"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="name_edit = false;com_edit_data = JSON.parse(JSON.stringify(com_data))">取 消</el-button>
          <el-button type="primary" @click="editSubmit('com_edit_data',com_edit_data);name_edit=false">确 定</el-button>
        </div>
      </el-form>
    </div>

    <div class="content-style">
      <p class="title-style" style="left: -100px;">地址</p>
      <p v-if="!address_edit" class="content-text-style">{{ com_data.enterprise_address }}
        <i @click="address_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;"></i></p>
      <el-form :rules="rules" class="form-text-style" v-if=" address_edit " ref="com_edit_data" :model="com_edit_data"
               label-width="80px">
        <el-form-item class="edit-item-style" label="公司地址" prop="enterprise_address">
          <el-input v-model="com_edit_data.enterprise_address"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="address_edit = false;com_edit_data = JSON.parse(JSON.stringify(com_data))">取 消</el-button>
          <el-button type="primary" @click="editSubmit('com_edit_data',com_edit_data);address_edit=false">确 定
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="content-style">
      <p class="title-style">所属行业</p>
      <p v-if="!industry_edit" class="content-text-style">{{ com_data.industry }}
        <i @click="industry_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;"></i></p>
      <el-form :rules="rules" class="form-text-style" v-if=" industry_edit " ref="com_edit_data" :model="com_edit_data"
               label-width="80px">
        <el-form-item class="edit-item-style" label="所属行业" prop="industry">
          <el-input v-model="com_edit_data.industry"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="industry_edit = false;com_edit_data = JSON.parse(JSON.stringify(com_data))">取 消</el-button>
          <el-button type="primary" @click="editSubmit('com_edit_data',com_edit_data);industry_edit=false">确 定
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="content-style">
      <div style="width: 120px;float: left;">
        <p class="title-style">联系人</p>
      </div>
      <p v-if="!enterprise_contacts_edit" class="content-text-style">{{ com_data.enterprise_contacts }}
        <i @click="enterprise_contacts_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;"></i></p>
      <el-form :rules="rules" class="form-text-style" v-if=" enterprise_contacts_edit " ref="com_edit_data"
               :model="com_edit_data" label-width="80px">
        <el-form-item class="edit-item-style" label="联系人" prop="enterprise_contacts">
          <el-input v-model="com_edit_data.enterprise_contacts"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="enterprise_contacts_edit = false;com_edit_data = JSON.parse(JSON.stringify(com_data))">取
            消
          </el-button>
          <el-button type="primary" @click="editSubmit('com_edit_data',com_edit_data);enterprise_contacts_edit=false">确
            定
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="content-style">
      <div style="width: 120px;float: left;">
        <p class="title-style">单位网址</p>
      </div>
      <el-link :href="'http://'+com_data.enterprise_website" target="_blank" v-if="!enterprise_website_edit"
               class="content-text-style"
               style="top: 15px;color: #6ba3ff">
        {{ com_data.enterprise_website }}
      </el-link>
      <i v-if="!enterprise_website_edit" @click="enterprise_website_edit = true" class="el-icon-edit"
         style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;left: 30px;top: 15px;"></i>
      <el-form :rules="rules" class="form-text-style" v-if=" enterprise_website_edit " ref="com_edit_data"
               :model="com_edit_data" label-width="80px">
        <el-form-item class="edit-item-style" label="单位网址" prop="enterprise_website">
          <el-input v-model="com_edit_data.enterprise_website"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="enterprise_website_edit = false;com_edit_data = JSON.parse(JSON.stringify(com_data))">取 消
          </el-button>
          <el-button type="primary" @click="editSubmit('com_edit_data',com_edit_data);enterprise_website_edit=false">确
            定
          </el-button>
        </div>
      </el-form>
    </div>

<!--    <div class="content-style">-->
<!--      <div style="width: 120px;float: left;">-->
<!--        <p class="title-style">机构码</p>-->
<!--      </div>-->
<!--      <p v-if="!organ_code_edit" class="content-text-style">{{ com_data.organ_code }}-->
<!--        <i @click="organ_code_edit = true" class="el-icon-edit"-->
<!--           style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;"></i></p>-->
<!--      <el-form :rules="rules" class="form-text-style" v-if=" organ_code_edit " ref="com_edit_data"-->
<!--               :model="com_edit_data" label-width="80px">-->
<!--        <el-form-item class="edit-item-style" label="机构码" prop="organ_code">-->
<!--          <el-input v-model="com_edit_data.organ_code"></el-input>-->
<!--        </el-form-item>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--          <el-button @click="organ_code_edit = false;com_edit_data = JSON.parse(JSON.stringify(com_data))">取 消-->
<!--          </el-button>-->
<!--          <el-button type="primary" @click="editSubmit('com_edit_data',com_edit_data);organ_code_edit=false">确 定-->
<!--          </el-button>-->
<!--        </div>-->
<!--      </el-form>-->
<!--    </div>-->

    <div class="content-style">
      <div style="width: 120px;float: left;">
        <p class="title-style">公司邮编</p>
      </div>
      <p v-if="!enterprise_postcode_edit" class="content-text-style">{{ com_data.enterprise_postcode }}
        <i @click="enterprise_postcode_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;"></i></p>
      <el-form :rules="rules" class="form-text-style" v-if=" enterprise_postcode_edit " ref="com_edit_data"
               :model="com_edit_data" label-width="80px">
        <el-form-item class="edit-item-style" label="公司邮编" prop="enterprise_postcode">
          <el-input v-model="com_edit_data.enterprise_postcode"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="enterprise_postcode_edit = false;com_edit_data = JSON.parse(JSON.stringify(com_data))">取 消
          </el-button>
          <el-button type="primary" @click="editSubmit('com_edit_data',com_edit_data);enterprise_postcode_edit=false">确 定
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="content-style">
      <div style="width: 120px;float: left;">
        <p class="title-style">公司性质</p>
      </div>
      <p v-if="!enterprise_nature_edit" class="content-text-style">{{ com_data.enterprise_nature }}
        <i @click="enterprise_nature_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;"></i></p>
      <el-form :rules="rules" class="form-text-style" v-if=" enterprise_nature_edit " ref="com_edit_data"
               :model="com_edit_data" label-width="80px">
        <el-form-item class="edit-item-style" label="公司性质" prop="enterprise_nature">
          <el-input v-model="com_edit_data.enterprise_nature"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="enterprise_nature_edit = false;com_edit_data = JSON.parse(JSON.stringify(com_data))">取 消
          </el-button>
          <el-button type="primary" @click="editSubmit('com_edit_data',com_edit_data);enterprise_nature_edit=false">确 定
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="content-style">
      <div style="width: 120px;float: left;">
        <p class="title-style">注册资金</p>
      </div>
      <p v-if="!register_capital_edit" class="content-text-style">{{ com_data.register_capital }}
        <i @click="register_capital_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;"></i></p>
      <el-form :rules="rules" class="form-text-style" v-if=" register_capital_edit " ref="com_edit_data"
               :model="com_edit_data" label-width="80px">
        <el-form-item class="edit-item-style" label="注册资金" prop="register_capital">
          <el-input v-model="com_edit_data.register_capital"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="register_capital_edit = false;com_edit_data = JSON.parse(JSON.stringify(com_data))">取 消
          </el-button>
          <el-button type="primary" @click="editSubmit('com_edit_data',com_edit_data);register_capital_edit=false">确 定
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="content-style">
      <div style="width: 120px;float: left;">
        <p class="title-style">公司简介</p>
      </div>
      <p v-if="!enterprise_introduction_edit" class="content-text-style">{{ com_data.enterprise_introduction }}
        <i @click="enterprise_introduction_edit = true" class="el-icon-edit"
           style="margin: 0;position:relative;font-size: 20px;color: #a8a8a8;"></i></p>
      <el-form :rules="rules" class="form-text-style" v-if=" enterprise_introduction_edit " ref="com_edit_data"
               :model="com_edit_data" label-width="80px">
        <el-form-item class="edit-item-style" label="公司简介" prop="enterprise_introduction">
          <el-input v-model="com_edit_data.enterprise_introduction"></el-input>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
          <el-button @click="enterprise_introduction_edit = false;com_edit_data = JSON.parse(JSON.stringify(com_data))">取 消
          </el-button>
          <el-button type="primary" @click="editSubmit('com_edit_data',com_edit_data);enterprise_introduction_edit=false">确 定
          </el-button>
        </div>
      </el-form>
    </div>

  </div>




  <!--  <div style="padding: 20px;margin-top: 550px;">-->
  <!--    <p>{{ com_data.enterprise_infor_examine }}</p>-->
  <!--    <el-descriptions title="公司信息" style="background: #e0e0e0" direction="vertical" border class="des-style">-->
  <!--      &lt;!&ndash;    可以不使用prop&ndash;&gt;-->
  <!--      <el-descriptions-item label="公司名称" prop="enterprise_name">-->
  <!--        {{ com_data.enterprise_name }}-->
  <!--      </el-descriptions-item>-->
  <!--      <el-descriptions-item label="单位地址" prop="enterprise_address">-->
  <!--        {{ com_data.enterprise_address }}-->
  <!--      </el-descriptions-item>-->
  <!--      <el-descriptions-item label="所属行业" prop="industry">-->
  <!--        {{ com_data.industry }}-->
  <!--      </el-descriptions-item>-->
  <!--      <el-descriptions-item label="联系人" prop="enterprise_contacts">-->
  <!--        {{ com_data.enterprise_contacts }}-->
  <!--      </el-descriptions-item>-->
  <!--      <el-descriptions-item label="单位网址" prop="enterprise_website">-->
  <!--        {{ com_data.enterprise_website }}-->
  <!--      </el-descriptions-item>-->
  <!--      <el-descriptions-item label="机构码" prop="organ_code">-->
  <!--        {{ com_data.organ_code }}-->
  <!--      </el-descriptions-item>-->
  <!--      <el-descriptions-item label="公司邮编" prop="enterprise_postcode">-->
  <!--        {{ com_data.enterprise_postcode }}-->
  <!--      </el-descriptions-item>-->
  <!--      <el-descriptions-item label="公司性质" prop="enterprise_nature">-->
  <!--        {{ com_data.enterprise_nature }}-->
  <!--      </el-descriptions-item>-->
  <!--      <el-descriptions-item label="传真" prop="enterprise_fax">-->
  <!--        {{ com_data.enterprise_fax }}-->
  <!--      </el-descriptions-item>-->
  <!--      <el-descriptions-item label="注册资金" prop="register_capital">-->
  <!--        {{ com_data.register_capital }}-->
  <!--      </el-descriptions-item>-->
  <!--      <el-descriptions-item label="公司简介" prop="enterprise_introduction">-->
  <!--        {{ com_data.enterprise_introduction }}-->
  <!--      </el-descriptions-item>-->
  <!--      <el-descriptions-item label="操作">-->
  <!--        <el-button-->
  <!--          size="mini"-->
  <!--          @click="handleEdit()">编辑-->
  <!--        </el-button>-->
  <!--      </el-descriptions-item>-->
  <!--    </el-descriptions>-->
  <!--  </div>-->

  <!--  图片相关-->
  <el-dialog title="上传图片(只上传图片列表的第一个)" v-model="student_file_dialogVisible">
    <!--    <button @click="change" class="up_button_style">选择文件</button>-->
    <div v-if="!addImg">

      <el-upload
        class="upload-demo"
        accept=".jpg"
        drag
        :auto-upload="false"
        :http-request="uploadFile"
        action="/uploadPics"
        ref="uploadPic"
        :multiple="multiple">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
    <template #footer>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addSomePeoplePicsForm">开始上传</el-button>
      </span>
    </template>
  </el-dialog>
  <!--  &lt;!&ndash;  编辑弹框&ndash;&gt;-->
  <!--  <el-dialog title="编辑信息" v-model="editDialogFormVisible">-->
  <!--    <el-form ref="form" :model="form" label-width="80px">-->
  <!--      <el-form-item label="公司名称" prop="enterprise_name">-->
  <!--        <el-input v-model="form.enterprise_name"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="单位地址" prop="enterprise_address">-->
  <!--        <el-input v-model="form.enterprise_address"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="所属行业" prop="industry">-->
  <!--        <el-input v-model="form.industry"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="联系人" prop="enterprise_contacts">-->
  <!--        <el-input v-model="form.enterprise_contacts"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="单位网址" prop="enterprise_website">-->
  <!--        <el-input v-model="form.enterprise_website"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="机构码" prop="organ_code">-->
  <!--        <el-input v-model="form.organ_code"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="公司邮编" prop="enterprise_postcode">-->
  <!--        <el-input v-model="form.enterprise_postcode"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="公司性质" prop="enterprise_nature">-->
  <!--        <el-input v-model="form.enterprise_nature"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="传真" prop="enterprise_fax">-->
  <!--        <el-input v-model="form.enterprise_fax"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="注册资金" prop="register_capital">-->
  <!--        <el-input v-model="form.register_capital"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="公司简介" prop="enterprise_introduction">-->
  <!--        <el-input v-model="form.enterprise_introduction"></el-input>-->
  <!--      </el-form-item>-->

  <!--      <div slot="footer" class="dialog-footer">-->
  <!--        <el-button @click="editDialogFormVisible = false">取 消</el-button>-->
  <!--        <el-button type="primary" @click="editSubmit('form',form)">确 定</el-button>-->
  <!--      </div>-->

  <!--    </el-form>-->
  <!--  </el-dialog>-->


</template>
<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
  name: 'comTable',
  data () {
    return {
      editDialogFormVisible: false,
      form: {},
      com_data: {},
      com_edit_data: {},

      name_edit: false,
      address_edit: false,
      industry_edit: false,
      enterprise_contacts_edit: false,
      enterprise_website_edit: false,
      organ_code_edit: false,
      enterprise_postcode_edit: false,
      enterprise_nature_edit: false,
      enterprise_fax_edit: false,
      register_capital_edit: false,
      enterprise_introduction_edit: false,

      rules: {
        enterprise_name: [{
          required: true,
          message: '不能输入空！',
          trigger: 'blur'
        },],
        enterprise_address: [{
          required: true,
          message: '不能输入空！',
          trigger: 'blur'
        },],
        industry: [{
          required: true,
          message: '不能输入空！',
          trigger: 'blur'
        },],
        enterprise_contacts: [{
          required: true,
          message: '不能输入空！',
          trigger: 'blur'
        },],
        enterprise_website: [{
          required: true,
          message: '不能输入空！',
          trigger: 'blur'
        },],
        organ_code: [{
          required: true,
          message: '不能输入空！',
          trigger: 'blur'
        },],
        enterprise_postcode: [{
          required: true,
          message: '不能输入空！',
          trigger: 'blur'
        },],
        enterprise_nature: [{
          required: true,
          message: '不能输入空！',
          trigger: 'blur'
        },],
        enterprise_fax: [{
          required: true,
          message: '不能输入空！',
          trigger: 'blur'
        },],
        register_capital: [{
          required: true,
          message: '不能输入空！',
          trigger: 'blur'
        },],
        enterprise_introduction: [{
          required: true,
          message: '不能输入空！',
          trigger: 'blur'
        },]
      },

      //头像相关
      formPicsData: '',
      multiple: true,
      activity: {
        UserID: '',
      },
      addImg: false,
      student_file_dialogVisible: false,

    }

  },

  created () {
    this.findAll()
  },

  methods: {

    handleinfo () {
      this.student_file_dialogVisible = true
      this.activity.UserID = this.com_data.enterprise_infor_id
    },
    uploadFile (file) {
      this.formPicsData.append('files', file.file)
      // console.log(file.file)
      // console.log(this.formPicsData)
      // console.log(1)
    },
    addSomePeoplePicsForm () {
      //console.log('开始上传')
      let self = this
      this.formPicsData = new FormData()
      this.formPicsData.append('content', '123')
      for (let key in this.activity) {
        this.formPicsData.append(key, this.activity[key])
      }
      console.log(this.formPicsData)
      // console.log(2)
      this.$refs.uploadPic.submit()
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      let _this = this
      //this.$ajax.post这个地方需要在main.js进行简单配置
      axios.post('http://localhost:8080/uploadImageUser', _this.formPicsData, config).then(res => {
        //TODO：具体自己逻辑部分
        console.log(res)
        _this.$message.success('上传成功!')
        _this.student_file_dialogVisible = false
        _this.formPicsData = ''
      }).catch(res => {
        //this.$message.error("服务器走丢了!");
        _this.$message.error('上传失败!')
      })
      //this.$message.success("上传成功!");
      // this.$router.go(0)

    },

    findAll () {
      let _this = this
      // console.log(JSON.parse(localStorage.getItem("Token"))[0]["Token"])
      //console.log(JSON.parse(localStorage.getItem("Token")))
      //console.log('2')
      // axios.post('http://localhost:8080/getLoginInfo',JSON.parse(localStorage.getItem("Token"))[0])
      //   .then(function (response) {
      //console.log(response.data)
      //console.log(response.data.account_number)
      // _this.form.enterprise_infor_id=response.data.account_number
      //console.log(_this.form.enterprise_infor_id)
      //commit调用mutation中的函数，而第二个参数为commit调用方法中的入参

      //localStorage.getItem("Token")
      //console.log( localStorage.getItem('username'))

      //_this.loading = false

      axios.get('http://localhost:8080/Get_Enterprise_infor')
        .then(function (response) {
          //console.log(response.data)
          for (let i in response.data) {
            //console.log(response.data[i].enterprise_infor_id)
            if (response.data[i].enterprise_infor_id.toString() === localStorage.getItem('username')) {
              _this.com_data = response.data[i]
            }
          }
          axios.post('http://localhost:8080//FindUserImage?UserID=' + eval(localStorage.getItem('username')))
            .then(function (response1) {
              console.log(response1.data)
              const temp = response1.data.student_imagepath.substr(17)
              _this.com_data.student_imagepath = require('E:/job/UserImage/' + temp)
              _this.com_edit_data = JSON.parse(JSON.stringify(_this.com_data))
            })
            .catch(function (error) {
              console.log(error)
            })
          console.log(_this.com_data)
        })
        .catch(function (error) {
          console.log(error)
        })

      // })
      // .catch(function (error) {
      //   console.log(error);
      // });

    },

    handleEdit () {
      this.form = this.com_data
      this.editDialogFormVisible = true
    },

    editSubmit (formName, formData) {
      formData.enterprise_infor_examine = '已审核'
      let _this = this
      console.log(_this.$refs[formName])
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8080/Edit_Enterprise_infor', formData)
            .then(function (response) {
              console.log(formData)
              _this.com_data = JSON.parse(JSON.stringify(_this.com_edit_data))
            })
            .catch(function (error) {
              console.log(error)
            })
          this.editDialogFormVisible = false
        } else {
          ElMessage.error('请输入正确格式！')
          _this.com_edit_data = JSON.parse(JSON.stringify(_this.com_data))
          console.log('error submit!!!')
          return false
        }

      })
    },

  }

}
</script>

<style scoped>

.des-style {
  font-family: arial, verdana, helvetica, 'PingFang SC', 'HanHei SC', STHeitiSC-Light, Microsoft Yahei, sans-serif;
}

.head-img-style {
  width: 150px;
  height: 150px;
  border-radius: 20px;
  float: left;
  border-style: solid;
  border-color: #787878;
  border-width: 5px;
}

.el-icon-edit:hover {
  cursor: pointer;
  color: #6ba3ff !important;
}

.edit-item-style {
  height: 50px;
  margin: 0 10px 0 0;
  float: left;
}

.content-style {
  width: 70%;
  background: #FFFFFF;
  height: 75px;
  position: relative;
  top: 180px;
  margin-left: 200px;
  padding-left: 50px;
  border-radius: 20px;
  margin-bottom: 35px;
}

.title-style {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-weight: bolder;
  margin: 0;
  height: 50px;
  font-size: 30px;
  position: relative;
  top: 15px;
  right: 40px;
  float: left;
}

.content-text-style {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  margin: 0;
  height: 50px;
  font-size: 20px;
  position: relative;
  top: 25px;
  left: 20px;
}

.form-text-style {
  z-index: 1;
  margin: 0;
  position: relative;
  padding-left: 125px;
  top: 20px;
  height: 50px;
}
</style>
